<!--
 * @description: 角色设定
 * @fileName: CharacterDesign
 * @author: 17076
 * @date: 2025/2/21-下午1:34
 * @version: V1.0.0
-->

<template>
  <div style="height: 100%;margin-top: 10px">
    <el-row :gutter="10">
      <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="6">
        <base-card title="角色设定">
          <div slot="right">
            <svg-icon icon-class="roles_list" style="cursor: pointer" @click="handleRolesList" />
            <!--            <el-button icon="el-icon-circle-plus-outline" >添加角色</el-button>-->
          </div>
          <div style="position: relative">
            <div class="roles-left" :style="{ height: $baseTableHeight(-8) + 'px' }">
              <el-form ref="form" :model="rolesForm" :rules="rules" label-width="90px" label-position="top">
                <el-form-item label="剧本角色" prop="id">
                  <el-select v-model="rolesForm['id']" allow-create filterable clearable placeholder="请选择剧本角色">
                    <el-option
                      v-for="item in roleList"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    />
                  </el-select>
                </el-form-item>
                <el-form-item label="声音" prop="voiceName">
                  <el-input v-model="rolesForm['voiceName']" disabled />
                  <el-row :gutter="10" style="margin-top: 10px">
                    <el-col
                      v-for="(item, index) in toneList"
                      :key="item.code"
                      :span="6"
                    >
                      <div :class="['tone-item', selectToneIndex === index ? 'tone-item-active' : '']" @click="handleSelectTone(index)">{{ item.name }}</div>
                    </el-col>
                  </el-row>
                  <el-row :gutter="10" style="margin-top: 10px">
                    <el-col
                      v-for="subItem in toneList[selectToneIndex]['child']"
                      :key="subItem.code"
                      :span="6"
                    >
                      <div :class="['flex-row', 'tone-sub-item', rolesForm['voice'] === subItem.code ? 'tone-sub-item-active' : '']" @click="handleSelectSubItem(subItem)">
                        <i class="el-icon-caret-right" @click.stop="handlePlay(subItem)" />
                        <span style="margin-left: 10px">{{ subItem.name }}</span>
                      </div>
                    </el-col>
                  </el-row>
                </el-form-item>
                <el-form-item label="角色描述" prop="remark">
                  <el-input v-model="rolesForm['remark']" type="textarea" :rows="3" placeholder="请输入角色描述" />
                </el-form-item>
                <el-form-item label="角色形象" prop="playRoleImages">
                  <el-button plain @click="handleAddRole">添加角色形象</el-button>
                  <p v-if="rolesForm['playRoleImages'] && rolesForm['playRoleImages'].length > 0">{{ `已选择角色服饰风格：${ formatterStyle(rolesForm['playRoleImages']) }` }}</p>
                </el-form-item>
              </el-form>
            </div>
            <div :class="['liner-button', 'confirm-button']" @click="handleSaveImage">加入分镜角色</div>
          </div>
        </base-card>
      </el-col>
      <el-col :xs="16" :sm="16" :md="16" :lg="16" :xl="18">
        <div class="roles-right" :style="{ height: $baseTableHeight(-110) + 'px' }">
          <el-row v-if="rolesHistoryList.length > 0" :gutter="10">
            <el-col v-for="(item, index) in rolesHistoryList" :key="index" :span="6">
              <div class="flex-column right-roles-item">
                <el-image :src="downloadUrl + item.fileId" fit="contain" />
                <span>{{ item.name }}</span>
                <span class="image-button" @click.stop="handleRoleImage(item)">角色形象</span>
                <i class="el-icon-edit edit-icon" @click.stop="handleEdit(item)" />
              </div>
            </el-col>
          </el-row>
          <el-empty v-else description="暂无角色数据" :style="{ height: $baseTableHeight(-60) + 'px' }">
            <template slot="image">
              <img src="@/assets/common/empty_role.png"/>
            </template>
          </el-empty>
        </div>
      </el-col>
    </el-row>
    <!--确认角色列表-->
    <roles-list ref="list" :play-id="playId" />
    <!--添加角色形象-->
    <role-image ref="image" @save="handleRolesSave" />
  </div>
</template>

<script>

import RoleImage from './RoleImage.vue'
import { selectByPlayRoleId, selectFinishedRole, updatePlayRole, selectPlayRole } from '@/api/roles'
import { baseURL } from '@/config'
import { commonDownloadFile } from '@/api/config/uploadApi'
import AddRoles from './AddRoles.vue'
import RolesList from './RolesList.vue'
import { mapActions, mapGetters } from 'vuex'

export default {
  name: 'CharacterDesign',
  components: { RolesList, AddRoles, RoleImage },
  props: {
    // 剧本id
    playId: {
      type: String || Number,
      default: 0
    }
  },
  data() {
    return {
      // 风格类型
      typeList: [],
      // 角色列表
      roleList: [],
      // 角色设置列表
      rolesHistoryList: [],
      // 声音-音色
      toneList: JSON.parse(sessionStorage.getItem('voice')),
      // 角色名称
      roles: '',
      // 当前选中的音色下标
      selectToneIndex: 0,
      // 文件下载链接
      downloadUrl: baseURL + commonDownloadFile,
      // 角色表单
      rolesForm: {},
      rules: {
        id: [{ required: true, message: '角色不能为空!', trigger: 'blur' }],
        playRoleImages: [{ required: true, message: '角色形象不能为空!', trigger: 'blur' }]
      }
    }
  },
  computed: {
    // 剧本状态
    ...mapGetters({
      playStatus: 'lens/playStatus'
    })
  },
  watch: {
    'rolesForm.id': {
      handler: function(val) {
        if (val) {
          this.handleRolesChange(val)
        }
      },
      immediate: true
    }
  },
  mounted() {
    this.handleViewRoles()
    // 表单添加剧本id
    this.$set(this.rolesForm, 'playId', this.playId)
    this.fetchRolesImage()
  },
  methods: {
    ...mapActions({
      changeShowNext2: 'lens/changeShowNext2'
    }),
    // 查询已设置角色形象
    fetchRolesImage() {
      selectFinishedRole({ playId: this.playId }).then(res => {
        this.rolesHistoryList = res.data
        if (this.rolesHistoryList.length > 0) {
          this.changeShowNext2(true)
        }
      })
    },
    // 查看剧本角色
    handleViewRoles() {
      selectPlayRole({ playId: this.playId }).then(res => {
        if (res.data.result.length > 0) {
          this.roleList = res.data.result
        } else {
          this.$refs.list.show()
        }
      })
    },
    // 格式化角色风格
    formatterStyle(val) {
      if (!val) return ''
      const styleArr = []
      val.forEach(item => {
        styleArr.push(item.dress)
      })
      return styleArr.join('、')
    },
    // 角色列表
    handleRolesList() {
      this.$refs.list.show()
    },
    // 声音选中
    handleSelectTone(index) {
      this.selectToneIndex = index
    },
    // 子音色选中
    handleSelectSubItem(item) {
      this.$set(this.rolesForm, 'voice', item.code)
      this.$set(this.rolesForm, 'voiceName', item.name)
    },
    // 声音播放
    handlePlay(item) {
      console.log(item, 7878)
    },
    // 角色形象选中
    handleRolesChange(val) {
      const data = this.roleList.find(item => item.id === val)
      this.$set(this.rolesForm, 'id', data['id'])
      this.$set(this.rolesForm, 'voice', data['voice'])
      this.$set(this.rolesForm, 'voiceName', data['voiceName'])
      this.$set(this.rolesForm, 'remark', data['remark'])
      selectByPlayRoleId({ playRoleId: val }).then(res => {
        this.$set(this.rolesForm, 'playRoleImages', res.data)
      })
    },
    // 编辑角色形象
    handleRoleImage(item) {
      selectByPlayRoleId({ playRoleId: item.playRoleId }).then(res => {
        this.$refs.image.show(res.data)
      })
    },
    // 编辑角色数据
    handleEdit(item) {
      this.$set(this.rolesForm, 'id', item['playRoleId'])
    },
    // 添加角色形象
    handleAddRole() {
      if (!this.rolesForm['id']) {
        this.$baseMessage.error('请先选择角色!')
        return
      }
      this.$refs.image.show(this.rolesForm['playRoleImages'])
    },
    // 角色形象选中
    handleRolesSave(data) {
      this.$set(this.rolesForm, 'playRoleImages', data['playRoleImages'])
    },
    // 保存角色形象
    handleSaveImage() {
      if (this.playStatus === '4') {
        this.$baseMessage.error('该剧本已进入分镜绘制阶段，禁止添加角色!')
        return
      }
      this.$refs.form.validate(async(valid) => {
        if (valid) {
          const { code, msg } = await updatePlayRole(this.rolesForm)
          code === 200 ? this.$baseMessage.success(msg || '保存成功!') : this.$baseMessage.error(msg || '保存失败!')
          this.fetchRolesImage()
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
.roles-left {
  color: white;
  overflow-y: auto;
  //padding-bottom: 70px;
  .tone-item {
    border: 1px solid #6A778C;
    text-align: center;
    height: 30px;
    line-height: 30px;
    border-radius: 15px;
    color: #B6C7D1;
    cursor: pointer;
    &:hover {
      border: 1px solid #FFFFFF;
      color: #FFFFFF;
    }
    &-active {
      border: 1px solid #FFFFFF;
      color: #FFFFFF;
    }
  }
  .tone-sub-item {
    background: #333B4A;
    border: 1px solid #333B4A;
    color: #999DA0;
    border-radius: 5px;
    padding: 1px 5px;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    &:hover {
      border: 1px solid #FFFFFF;
      color: #FFFFFF;
    }
    &-active {
      border: 1px solid #FFFFFF;
      color: #FFFFFF;
    }
  }
  .confirm-button {
    margin-top: 10px;
  }
}
.roles-right {
  background: $base-content-background;
  overflow-y: auto;
  border-radius: 8px;
  padding: 20px;
  box-sizing: border-box;
  color: #FFFFFF;
  .right-roles-item {
    flex: 1;
    align-items: center;
    cursor: pointer;
    position: relative;
    .el-image {
      width: 100%;
      height: 200px;
      border-radius: 8px;
    }
    span {
      margin-top: 10px;
    }
    .image-button {
      margin-top: 0 !important;
      position: absolute;
      right: 50px;
      top: 10px;
      padding: 7px 10px;
      box-sizing: border-box;
      background: rgba(18, 20, 24, 0.50);
      border-radius: 5px;
      cursor: pointer;
      display: none;
    }
    .edit-icon {
      position: absolute;
      right: 10px;
      top: 10px;
      padding: 8px;
      border-radius: 5px;
      box-sizing: border-box;
      background: rgba(18, 20, 24, 0.50);
      cursor: pointer;
      display: none;
    }
    &:hover {
      .image-button, .edit-icon {
        display: block;
      }
    }
  }
}
</style>
